import { Box, Button, Flex, Heading, Image, Text } from '@chakra-ui/react';

const Hero = () => (
  <Flex
    bgGradient="linear(135deg, #3f0d82, #a01396)"
    color="white"
    rounded="2xl"
    px={{ base: 6, md: 10 }}
    py={{ base: 6, md: 8 }}
    direction={{ base: 'column', md: 'row' }}
    align="center"
    justify="space-between"
    gap={{ base: 4, md: 8 }}
  >
    <Box maxW="420px">
      <Text
        fontSize="sm"
        textTransform="uppercase"
        letterSpacing="0.2em"
        color="whiteAlpha.800"
      >
        Explore More
      </Text>
      <Heading size="2xl" mt={2}>
        OPPO Find X
      </Heading>
      <Text mt={3} fontSize="md" color="whiteAlpha.800">
        Newone · On Your First Choice
      </Text>
      <Button
        mt={6}
        variant="outline"
        colorScheme="whiteAlpha"
        borderColor="whiteAlpha.700"
        _hover={{ bg: 'whiteAlpha.200' }}
      >
        Shop Now
      </Button>
    </Box>
    <Image
      src="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?auto=format&fit=crop&w=800&q=80"
      alt="OPPO Find X banner"
      borderRadius="xl"
      width={{ base: '100%', md: '360px' }}
      objectFit="cover"
      boxShadow="xl"
    />
  </Flex>
);

export default Hero;
